<template>
    <div id="app" v-cloak>
    <div class="container">
      <!-- 标题 -->
      <ul class="title-box">
        <li v-for="item in poetList" :key="item.id" @click="changeTab(item.id)" :class="active == item.id?'active':''"
          @dblclick="isTitle = item.id">
          <input type="text" v-model="item.name" v-if="isTitle == item.id" focus @blur="isTitle = -1" />
          <span v-else>{{ item.name }}</span>
          <em @click.stop="del(item.id)">×</em>
        </li>
        <button id="btn" @click="flag = true ">＋</button>
      </ul>
      <!-- 内容 -->
      <ul class="content-box">
        <li v-for="item in poetList" :key="item.id" v-show="active == item.id" @dblclick="isContent = item.id">
          <input type="text" v-model="item.verse" v-if="isContent == item.id" focus @blur="isContent = -1" />
          <span v-else>{{ item.verse }}</span>
        </li>
      </ul>
      <!-- 添加遮罩层 -->
      <div v-show="flag" class="cover" @click.self="flag = false">
        <div class="main">
          <div class="t-input">
            <label for="title">标题:</label>
            <input type="text" id="title" v-model="title">
          </div>
          <div class="c-input">
            <label for="content">内容:</label>
            <input type="text" id="content" v-model="content">
          </div>
          <div>
            <button @click="add">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="./vue.js"></script>
<script>
export default {
      el: "#app",
      data() {
        return {
          poetList: [{
            id: 1,
            name: "心动了吗",
            verse: "疲惫的生活里总要有些温柔的梦想"
          }, {
            id: 2,
            name: "瑶瑶",
            verse: "成年人的崩溃往往在一瞬间"
          }],
          /* 切换对应内容 */
          active: 1,
          /* 添加的信息 */
          title: "",
          content: "",
          /* 遮罩层是否 */
          flag: false,
          /* 修改标题 */
          isTitle: -1,
          /* 修改内容 */
          isContent: -1,
        }
      },
      methods: {
        /* tab切换 */
        changeTab(id) {
          this.active = id;
        },
        /* 添加 */
        add() {
          let num = this.poetList.length + 1;
          class Poet {
            constructor(id, name, verse) {
              this.id = id;
              this.name = name;
              this.verse = verse;
            }
          }
          var newList = new Poet(num, this.title, this.content)
          this.poetList.push(newList)
          this.active = num;
          this.title = "";
          this.content = "";
          this.flag = false;
        },
        /* 删除 */
        del(id) {
          this.poetList = this.poetList.filter(item => item.id != id)
          /* 判断该标题后是否有数据 */
          let isExist = this.poetList.filter(item => item.id > id)
          /* 如果有选中删除项的前一个 */
          if (isExist.length) {
            /* 取出大于删除id的数组中的第一个 */
            let aa = isExist.shift();
            this.active = aa.id
          } else {
            this.active = id - 1
          }
        },
      },
}
</script>

<style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    html,
    body,
    #app {
      width: 100%;
      height: 100%;
      overflow: hidden;
      user-select: none;
    }

    [v-cloak] {
      display: block;
    }

    .container {
      width: 800px;
      height: 600px;
      margin: 50px auto;
      border: 1px solid #333;
      position: relative;
    }


    .title-box {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      position: relative;
    }

    .title-box li {
      height: 100%;
      padding: 0 20px;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
    }

    .title-box li input {
      width: 50px;
      height: 24px;
    }

    .title-box li em {
      position: absolute;
      width: 10px;
      height: 10px;
      text-align: center;
      line-height: 10px;
      font-style: normal;
      top: 5px;
      right: 5px;
      background-color: #000;
      color: #fff;
    }

    .title-box li.active {
      background-color: plum;
    }

    #btn {
      position: absolute;
      right: 10px;
      padding: 10px;
    }

    .content-box {
      width: 100%;
      height: 550px;
    }

    .content-box li {
      width: 100%;
      height: 100%;
      background-color: plum;
      text-align: center;
      line-height: 550px;
      font-size: 40px;
    }

    .content-box li input {
      width: auto;
      height: 40px;
      font-size: 34px;
    }

    .cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .8);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .cover .main {
      width: 60%;
      height: 60%;
      padding: 10%;
      z-index: 20;
      box-sizing: border-box;
      background: #ccc;
    }

    .cover .main div {
      width: 100%;
      height: calc(100% / 3);
      display: flex;
      align-items: center;
    }

    .cover .main div label {
      padding: 0 10px;
    }

    .cover .main div input {
      width: 60%;
      height: 30px;
      border: none;
      outline: none;
      border: 1px solid #333;
      border-radius: 4px;
    }

    .cover .main div button {
      width: 50%;
      height: 30px;
      margin: auto;

    }

</style>